<template>
  <!-- 回显图片的组件 -->
  <div class="side">
    <div class="img-box" :style="{'flex-wrap':isWrap||'wrap'}">
      <template v-if="list&&list.length">
        <img v-for="(item,ind) in list" :key="item" class="lin-item" :style="{width:width||'100px',height:height||'100px'}" :src="item" @click="review(ind)" />
      </template>
      <div v-else style="width:100%;color: #999;text-align: center;">
        暂无图片
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "imgBox",
  props: ["img", "width", "height", "isWrap"],
  data() {
    return {
      dialogVisible: false,
      list: [],
    };
  },
  watch: {
    img: {
      handler(newVal) {
        this.init();
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    // 打开弹窗
    init() {
      this.list = [];
      if (this.img) {
        if (this.img.startsWith("[") && this.img.endsWith("]")) {
          // 多张图
          const imgList = JSON.parse(this.img);
          if (imgList && imgList.length) {
            imgList.forEach((element) => {
              this.list.push(element.url);
            });
          }
        } else {
          this.list = [this.img];
        }
      }
    },
    review(ind) {
      this.$viewerApi({
        images: this.list,
        options: {
          initialViewIndex: ind,
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.side{
  width: 100%;
  overflow-y: auto;
}
.img-box {
  display: flex;
  flex-wrap: wrap;
  // .lin-item {
  //   width: 80px;
  //   height: 80px;
  // }
}
.lin-item {
  flex-shrink: 0;
  margin: 5px;
  object-fit: cover;
}
</style>
